<template>
  <div class="layout">
    <!--    <ThemeSwitcher />-->
    <!-- 可选：主题切换器 -->
    <!--    <TechPanel>-->
    <!--      <h2>实时数据</h2>-->
    <!--      <p>文物数量：123,456</p>-->
    <!--      <p>系统状态：正常</p>-->
    <!--    </TechPanel>-->
    <aside class="sidebar-left"></aside>

    <main class="main-content">
      <!-- 中间内容，留空或放地图上层控件 -->
    </main>

    <aside class="sidebar-right">
      <!-- 右侧工具栏 -->
      <p>相机位置：{{ formattedCameraInfo }}</p>
      <p>点击坐标：{{ formattedMousePosition }}</p>
    </aside>
  </div>
</template>
<script setup lang="ts">
import {CameraInfo, getMousePosition, startCameraInfoTracking} from '@/utils/InitViewerContainer';
// import { startCameraInfoTracking, CameraInfo } from '@/utils/CameraInfoTracker';
import {onMounted, ref} from 'vue';
import {SuperMap3D} from '@/utils/supermap3d';

const {__viewer, SuperMapConfig} = window;

const cameraInfo = reactive<CameraInfo>({
  longitude: '0',
  latitude: '0',
  height: '0',
  heading: '0',
  pitch: '0',
  roll: '0',
  cartesian3Position: SuperMap3D.Cartesian3.ZERO,
});
const mousePosition = ref(null);

// 计算属性
const formattedCameraInfo = computed(() => ({
  经度: `${cameraInfo.longitude}°`,
  纬度: `${cameraInfo.latitude}°`,
  高度: `${cameraInfo.height} 米`,
  方向: `${cameraInfo.heading}°`,
  俯仰: `${cameraInfo.pitch}°`,
  翻滚: `${cameraInfo.roll}°`,
}));

const formattedMousePosition = computed(() => {
  if (!mousePosition.value) return '未点击';
  return `点击位置：经度 ${mousePosition.value.longitude}, 纬度 ${mousePosition.value.latitude}, 高度 ${mousePosition.value.height}`;
});

onMounted(async () => {
  console.log('onMounted');
  // 监听右键点击获取坐标
  getMousePosition(__viewer, (position) => {
    mousePosition.value = position;
  });

  // viewer 是你初始化 Cesium 时的 viewer 对象
  startCameraInfoTracking(__viewer, (info) => {
    //Object.assign 用于合并对象或创建一个对象的浅拷贝
    Object.assign(cameraInfo, info);
  });
});
</script>

<style scoped>
.layout {
  position: relative;
  z-index: 10; /* 保证高于cesium地图 */
  display: flex;
  height: 100vh;
  width: 100vw;
  pointer-events: none; /* 先禁用鼠标事件，具体可根据需要调整 */
}

.sidebar-left {
  pointer-events: auto; /* 激活左栏交互 */
  width: 800px;
  height: 100vh;
  padding: 30px;
}

.main-content {
  flex: 1;
  /* 留空，地图已经挂在App.vue，或者叠加控件 */
}

.sidebar-right {
  pointer-events: auto; /* !* 激活右栏交互 */
  width: 300px;
  font-size: 20px;
  background-color: rgba(255, 255, 255, 0.8);
  padding: 30px;
}
</style>
